<template>
  <span
    :class="[
        'inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium',
        cls,
        variantClass
    ]"
    :style="{ backgroundColor: bgColor, color }"
  >
    <slot />
  </span>
</template>

<script setup>
import {computed} from "vue";

const props = defineProps({
    bgColor: {
        type: String,
        default: null,
    },
    color: {
        type: String,
        default: null,
    },
    cls: {
        type: String,
        default: null,
    },
    variant: {
        type: String,
        default: null,
        validator: function (value) {
            return (
                [
                    'gray',
                    'red',
                    'yellow',
                    'green',
                    'blue',
                    'indigo',
                    'purple',
                    'pink',
                ].indexOf(value) !== -1
            )
        },
    },
})

const variantClass = computed(function () {
    let cls = ''
    switch (props.variant) {
        case 'gray':
            cls = 'bg-gray-100 text-gray-800'
            break
        case 'red':
            cls = 'bg-red100 text-red-800'
            break
        case 'yellow':
            cls = 'bg-yellow-100 text-yellow-800'
            break
        case 'green':
            cls = 'bg-green-100 text-green-800'
            break
        case 'blue':
            cls = 'bg-blue-100 text-blue-800'
            break
        case 'indigo':
            cls = 'bg-indigo-100 text-indigo-800'
            break
        case 'purple':
            cls = 'bg-purple-100 text-purple-800'
            break
        case 'pink':
            cls = 'bg-pink-100 text-pink-800'
            break
    }
    return cls
})
</script>
